<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <title>cssarrowplease</title>
    <meta name="description" content="CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.">
<!--    <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:400,700' rel='stylesheet' type='text/css'>-->
    <link rel="stylesheet" type="text/css" href="css/app.css" />
  </head>
  <body>

    <div id='content' class='clr'>
      <div class='preview_and_configuration'>
        <div class='preview'>
          <div class='arrow_box'>
            <h1 class='logo'>css arrow please!</h1>
          </div>
        </div>
        <form class='configuration'>
          <h2>Arrow configuration</h2>
          <div class='clr'>
            <ol class='section positions'>
              <li>
                <label>Position</label>
                <label><input type="radio" name="position" value="top"    class="position" /> Top</label>
                <label><input type="radio" name="position" value="right"  class="position" /> Right</label>
                <label><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
                <label><input type="radio" name="position" value="left"   class="position" /> Left</label>
              </li>
            </ol>
            <ol class='section'>
              <li>
                <label for='size'>Size</label>
                <input class='size' id='size' /><span class='unit'>px</span>
              </li>
              <li>
                <label for='color'>Color</label>
                <input class='base_color color {hash:true,caps:false}' id='color' />
              </li>
            </ol>
            <ol class='section'>
              <li>
                <label for='border_width'>Border width</label>
                <input class='border_width' id='border_width' /><span class='unit'>px</span>
              </li>
              <li>
                <label for='border_color'>Border color</label>
                <input class='border_color color {hash:true,caps:false}' id='border_color' />
              </li>
            </ol>
          </div>
        </form>
      </div>

      <div class='css_result'>
        <code class='code' readonly='readonly'></code>
        <div class='copy_code'></div>
      </div>

    </div>

    <footer id='footer'>
      &copy; 2012 By <a href='http://icreateui.com'>Simon Højberg</a>
      &middot;
      Follow me on twitter: <a href='https://twitter.com/shojberg'>@shojberg</a>
      &middot;
      Checkout the source on <a href='https://github.com/hojberg/cssarrowplease'>github</a>
      &middot;
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://cssarrowplease.com" data-text="Simple way to create CSS arrows for tooltips and the like" data-via="shojberg">Tweet</a>
    </footer>

    <script src="js/vendor/jscolor/jscolor.js"></script>
    <link rel="stylesheet" type="text/css" href="js/vendor/jscolor/jscolor.css">

    <script src='js/cssarrowplease.js'></script>

<!--    <script>
      // gajs
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-30519406-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

      // twitter
      window.twttr = (function (d, s, id) {
        var t, js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id; js.src= "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
      }(document, "script", "twitter-wjs"));
    </script>-->
  </body>
</html>
